<template>
  <div class="address">
    <van-nav-bar title="新增收货地址" left-arrow fixed @click-left="$router.back()" />
    <div class="container">
      <p class="title">收货地址</p>
      <van-form @submit="onSubmit">
        <van-field
          v-model="name"
          name="姓名"
          label="姓名"
          placeholder="请输入收货人姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="phone"
          name="电话"
          label="电话"
          placeholder="请输入收货人手机号"
          :rules="[{ required: true, message: '请填写电话' },{ validator, message: '手机号码不正确' }]"
        />
        <van-field
          readonly
          clickable
          name="region"
          :value="region"
          label="地区"
          placeholder="请选择省/市/区"
          @click="show = true"
          :rules="[{ required: true, message: '请填写地区' }]"
        />
      <van-popup v-model="show" round position="bottom">
        <van-cascader
          title="请选择所在地区"
          :options="areaList"
          @close="show = false"
          @finish="onFinish"
        />
      </van-popup>
        <van-field
          v-model="detail"
          name="详细地址"
          label="详细地址"
          placeholder="街道门牌、楼层等信息"
          :rules="[{ required: true, message: '请填写详细地址' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit" color="linear-gradient(90deg, #f9211c, #ff6335)">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>

import { Toast } from 'vant'
import { addAddress, getRegionTree } from '@/api/address'

export default {

  data () {
    return {
      name: '',
      phone: '',
      region: '',
      regionList: [],
      detail: '',
      show: false,
      areaList: []
    }
  },
  async created () {
    const { data: { list } } = await getRegionTree()
    for (const k in list) {
      const province = list[k]
      const obj1 = { text: province.name, value: province.id, children: [] }
      this.areaList.push(obj1)

      for (const m in province.city) {
        const city = province.city[m]
        const obj2 = { text: city.name, value: city.id, children: [] }
        obj1.children.push(obj2)

        for (const n in city.region) {
          const region = city.region[n]
          const obj3 = { text: region.name, value: region.id }
          obj2.children.push(obj3)
        }
      }
    }
  },
  methods: {
    empty () {
      this.name = ''
      this.phone = ''
      this.region = ''
      this.regionList = []
      this.detail = ''
    },
    async onSubmit () {
      await addAddress({
        form: {
          name: this.name,
          phone: this.phone,
          detail: this.detail,
          region: this.regionList
        }
      })
      Toast('添加成功')
      this.empty()
    },
    validator (val) {
      return /1\d{10}/.test(val)
    },
    onFinish ({ selectedOptions }) {
      this.show = false
      this.region = selectedOptions.map((option) => option.text).join('/')
      this.regionList = selectedOptions.map((option) => ({ label: option.text, value: option.value }))
    }
  }

}
</script>

<style lang="less" scoped>

.address {
 padding-top: 46px;
 padding-bottom: 50px;
}

.van-nav-bar {
    ::v-deep .van-nav-bar__title {
    font-weight: bold;
  }

    ::v-deep .van-icon-arrow-left {
        color: black;
    }
}

.container {
  width: 375px;
  height: 349px;
  font-size: 14px;

  .title {
    color: rgba(69, 90, 100, .6);
    padding: 10px;
  }
}
</style>
